import React, { useState } from 'react'
import { Editor } from "react-draft-wysiwyg";
import {convertToRaw} from 'draft-js'
import draftToHtml from 'draftjs-to-html';
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";

const NewsEditor = ({getArticleContent}) => {
  // console.log(aaa,getArticleContent)
  const [editorState,setEditorState] = useState('')
  return (
    <div>
      <Editor 

      /* 
        editorState  用来存储编辑器的状态的,简单来讲就是存储数据的
        onEditorStateChange:这个事件是每次编辑器内容发生变化之后都会触发,通过这个事件获取新的数据,重新绑定到editorState中
      */
        editorState={editorState}
        onEditorStateChange={(editorState)=>setEditorState(editorState)}
        /* 
          通过失去焦点事件,获取编辑器中的内容
          editorState.getCurrentContent() 获取当前编辑器中的内容  对象
          convertToRaw 通过这个方法转换为draft对象
          draftToHtml 这个方法将draft对象转换为包含标签的字符串
        */
        onBlur={()=>{
          // console.log(draftToHtml(convertToRaw(editorState.getCurrentContent())))
          getArticleContent(draftToHtml(convertToRaw(editorState.getCurrentContent())))

          // 子组件如何将数据传递给父组件  add.tsx  自定义函数实现 子->父
        }}
      />
    </div>
  )
}

export default NewsEditor
